
<!-- 商城订单评价 -->
<template>
	<view class="container">
		<uni-nav-bar @clickLeft="back" leftIcon="back" :fixed="true" status-bar="true" title="发表评价"></uni-nav-bar>
		<!-- <view class="order-id">
			订单编号： {{data.order_id}}
		</view> -->

		<view class="goods-list" v-for="(item, num) in goodsList" :key="num">
			<view class="list-group">
				<view class="list-cell">
					<view class="list-cell-hd">
						<image style="" :src="item.productInfo.image"></image>
					</view>
					<view class="list-cell-bd" style="padding-left: 20rpx;">
						<view class="list-label clamp2">{{ item.productInfo.store_name }}</view>
						<view class="list-label-desc" v-if="item.productInfo.attrInfo">{{ item.productInfo.attrInfo.suk || '' }}</view>
					</view>
				</view>
				<view class="service-box">
					<view class="service-item">
						<view class="left">
							<text class="label">服务分数</text>
							<view class="star-box">
								<text :class="['star', postdata[num].service_score > index ? 'checked' : '']" @tap="handleScore(1, num, index+1)"
								 v-for="(item, index) in 5" :key="index">★</text>
							</view>
						</view>
						<text class="desc">{{ handleDesc[postdata[num].service_score - 1] }}</text>
					</view>
					<view class="service-item">
						<view class="left">
							<text class="label">产品分数</text>
							<view class="star-box">
								<text :class="['star', postdata[num].product_score > index ? 'checked' : '']" @tap="handleScore(2, num, index+1)"
								 v-for="(item, index) in 5" :key="index">★</text>
							</view>
						</view>
						<text class="desc">{{handleDesc[postdata[num].product_score - 1]}}</text>
					</view>
				</view>
				<view class="input-box">
					<textarea class="content" v-model="postdata[num].comment" auto-height :maxlength="200" placeholder="从多个角度评价宝贝，可以帮助更多想买的人" />
					<!-- <text class="count">{{ postdata[num].comment.length }}/140</text> -->
				</view>
				
			</view>
			<view class="img-box-upload">
				<img-upload :serverUrl="serverUrl" @complete="result($event,num)" @remove="remove"></img-upload>
			</view>
		</view>
		<view class="btn-box" @tap="onPost">发 布</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import imgUpload from '@/components/img-upload/img-upload.vue';
import { orderComment,orderDetail } from '@/api/mall.js';
import { baseUrl } from '@/api/api.js'
export default {
	data() {
		return {
			type: 0,
			goodsList: [],
			orderId: 0,
			orderInfo: {}, // 订单详情
			orderGoods: {}, // 订单商品
			handleDesc: ['大失所望', '比较差', '比较满意', '很满意', '无可挑剔'],
			data: {},
			serverUrl: baseUrl() + '/upload/image',
			postdata: [],
		};
	},
	components: {
		imgUpload,
		uniNavBar
	},
	onLoad(options) {
		let id = options.orderId;
		// id = 'wx159238179269867749'
		this.getOrderDetail(id);
	},
	methods: {
		onClose() {
			uni.navigateBack({
				delta: 1
			});
		},
		onPost() {
			let haveErr = false;
			let that = this;
			for(let i = 0;i<this.postdata.length;i++){
				if (!this.postdata[i].service_score||!this.postdata[i].product_score) {
					this.$api.msg('请为所有产品和服务打分');
					return
				}
			}
			for(let i = 0;i<this.postdata.length;i++){
				orderComment(this.postdata[i]).then(res => {
					if(i == this.postdata.length-1){
						this.$api.msg('评价成功！');
						uni.setStorageSync('doRefresh',true)
						setTimeout(function() {
							uni.navigateBack();
						}, 800);
					}
				});
			}
			
			
		},
		// couponClickBack() {
		// 	uni.navigateBack({
		// 		delta: 2
		// 	});
		// },
		getOrderDetail(id) {
			orderDetail(id).then(res => {
				this.data = res.data;
				this.goodsList = res.data.cartInfo;
				this.postdata = res.data.cartInfo.map((val,key)=> {
					let obj = {};
					obj.unique = val.unique;
					obj.service_score = 0;
					obj.product_score = 0;
					return obj
				})
			})
		},
		handleScore(type,index,value) {
			this.postdata = this.postdata.map((val,key)=>{
				if(key == index && type == 1){
					val.service_score = value
				}
				else if(key == index && type == 2){
					val.product_score = value
				}
				return val
			});
		},
		result(e,index) {
			if (e.status == 1) {
				this.postdata = this.postdata.map((val,key)=>{
					if(key == index){
						val.pics = e.imgArr;
					}
					return val;
				});
			}
		},
		remove(e) {
			//移除图片
			let index = e.index
		},
		back(){
			uni.navigateBack({
				
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page,
.container {
	height: 100%;
	background: #f0f0f0;
	.order-id{
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
	}
}

.list-group {
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 28rpx;
  overflow: hidden;
  position: relative;
}

.list-cell {
  padding: 10px 15px;
  position: relative;
  display: flex;
  align-items: start;
  border-bottom: 1rpx solid #eee;
}


.list-cell-hd {
  display: flex;
  align-items: center;
  image{
	  width: 150rpx;
	  height:150rpx;
	  border-radius: 12rpx;
  }
}

.list-cell-bd {
  flex: 1;
  line-height: 1.2rem;
}

.list-cell-bd .list-label {
  font-size: 1em;
}

.list-cell-bd .list-label-desc {
  font-size: 0.9em;
  color: #9b9b9b;
  padding-top: 5px;
}

.service-box {
	background-color: #fff;
	padding: 20px 20px 0;
}

.service-item {
	height: 85rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.service-item .left{
	display: flex;
	align-items: center;
}

.service-item .label {
	color: #999;
}

.service-item text:not(.label) {
	padding-left: 10px;
}

.star-box .star {
	font-size: 1.7em;
	padding-left: 10rpx;
	color: #ddd;
}

.star-box .star.checked {
	color: $mall-price;
}

.goods-list {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 20rpx;
}

.goods-list .input-box {
	border: 1px solid #ccc;
	margin: 20px;
	border-radius: 20rpx;
}

.goods-list .input-box .content {
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	min-height: 200rpx;
}

.goods-list .input-box .count {
	float: right;
}

.pic-box {
	margin-top: 10px;
	padding: 0 20px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: nowrap;
}
.btn-box {
	margin: 60rpx auto;
	width: 710rpx;
	background: $mall-price;
	height: 80rpx;
	line-height: 80rpx;
	color: white;
	text-align: center;
	font-size: 30rpx;
	border-radius: 15rpx;
}

.name {
	font-size: 34rpx;
	color: #fff;
	margin-bottom: 14rpx;
}

.time {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	line-height: 30rpx;
}
.img-box-upload{
	padding-left: 25rpx;
	box-sizing: border-box;
}
</style>
